<mat-card *ngFor="let build of project.Builds.slice(this.currentPage * 10, (this.currentPage + 1) * 10); let i = index;"
  style="margin-bottom: 1em; padding-bottom: 0.5em;">
  <mat-card-title class="build-title">
    <div fxLayout="row wrap" fxLayoutAlign="space-between">
      <div fxFlex="1 1 70%">
        <span class="success" *ngIf="build.Success">
          <mat-icon>done</mat-icon>
        </span>
        <span class="failed" *ngIf="!build.InProgress && !build.Success" align="start">
          <mat-icon>close</mat-icon>
        </span>

        <span class="inprogress" *ngIf="build.InProgress">
          <mat-progress-spinner class="spinner" [color]="color" [mode]="mode" [value]="value" [diameter]="22" [strokeWidth]="3"></mat-progress-spinner>
        </span>
        <span style="padding-left: 0.5em; padding-right: 0.5em;" class="Label Label--outline v-align-middle">v{{ build?.Version ? build?.Version : '0.0.1'}}</span>

        {{build.CreatedAt | amTimeAgo}}
        <span style="color: #999">({{build.Id}})</span>
        <span *ngIf="!build.InProgress" style="color: #999">- took {{timeItTook(build)}} seconds</span>
      </div>
      <div fxFlex="1 1 20%" align="end">
        <button *ngIf="!build.Selected && i !== 0" mat-button style="min-width: 0%; margin-bottom: 10px;" type="button" (click)="reveal(build)">
          <mat-icon aria-hidden="false">keyboard_arrow_down</mat-icon>
        </button>
        <button [hidden]="!build.Selected  || i === 0" mat-button style="min-width: 0%; margin-bottom: 10px;" (click)="reveal(build)">
          <mat-icon aria-hidden="false">keyboard_arrow_up</mat-icon>
        </button>
      </div>
    </div>
  </mat-card-title>
  <div *ngIf="build.Selected || i === 0">
    <ace-editor *ngIf="build.InProgress" class="editor" [text]="'Build is in progress, it may take a few seconds...'" [mode]="'text'"
      style="min-height: 200px; width:100%;
    overflow: auto;" #editor></ace-editor>
    <mat-accordion *ngIf="!build.InProgress" class="example-headers-align">
      <mat-expansion-panel *ngFor="let step of build.Steps">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <span class="success" *ngIf="step.Success">
              <mat-icon>done</mat-icon>
            </span>
            <span class="failed" *ngIf="!step.Success" align="start">
              <mat-icon>close</mat-icon>
            </span>
          </mat-panel-title>
          <mat-panel-description>{{step.Title}}</mat-panel-description>
        </mat-expansion-panel-header>
        <ace-editor class="editor" [text]="step.Output" [mode]="'sh'" style="min-height: 200px; width:100%;
        overflow: auto;" #editor></ace-editor>
      </mat-expansion-panel>
    </mat-accordion>
  </div>
</mat-card>
<span *ngIf="project.Builds.length > 10">
  <mat-paginator [length]="project.Builds.length" [pageSize]="10" [pageSizeOptions]="[10]" (page)="pageChanged($event)">
  </mat-paginator>
</span>